<%@ page isELIgnored ="false" pageEncoding="UTF-8" %> 
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Happy Roulette!</title>
		<link rel="stylesheet" type="text/css" href="styles1.css" />
	
		<script language="javascript">
		var ajaxRequest = createAjaxRequest();

		function createAjaxRequest() {
			if (typeof XMLHttpRequest != "undefined") {
				return new XMLHttpRequest();
			} 
			else if (window.ActiveXObject) {
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}

		function changeBet(id) {			
			// Construye la URL
			var url = "bet?posicion=" + id;

			alert(id);
			// Envía el pedido
			ajaxRequest.open("GET", url, true);
			ajaxRequest.onreadystatechange = updateBet;
			ajaxRequest.send(null);
		}
		
		function updateBet() {
		    if (ajaxRequest.readyState == 4) {
		        if (ajaxRequest.status == 200) {
					document.getElementById("bet").innerHTML = ajaxRequest.responseText;
		        }
		        else {
		        	alert("No se pudieron obtener los detalles de la apuesta " + id + "\n" + 
		        	      "Por un error: " + ajaxRequest.status + ajaxRequest.statusText);
		        }
		    }
		}
		</script>
	</head>

<body>
<center>
	<c:set var="player" scope="page" value="${sessionScope.player}"/>
	<span>Hi </span> <span>${player.name}</span> <span>!</span>
	<br />
	<span>Actual chips:</span> <span>${player.chips}</span> 
	<br />
	
	<h2>Roulette:</h2>
	<table>
		<tr>
			<th>1st</th>
			<th>2nd</th>
			<th>3rd</th>
		</tr>
		<c:forEach items="${sessionScope.rows}" var="row" varStatus="status">
			<tr>
				<td>${row.first}</td>
				<td>${row.second}</td>
			   	<td>${row.third}</td>
		    </tr>
		</c:forEach>
	</table>
	<br />
	
	<form method="post" action="spinRoulette">
		<input type="submit" name="spinRoulette" id="spinRoulette" value="SpinRoulette"/>
	</form>
	<form method="get" action="makeBetRoulette">
		<input type="submit" name="makeBetRoulette" id="makeBetRoulette" value="MakeBet"/>
	</form>
	<br></br>
	
	<div id="listaApuesta">
		<table>
			<tr>
				<th>#</th>
				<th>Player</th>
				<th>Number</th>
			</tr>
			<c:forEach items="${table.actualBets}" var="bet" varStatus="status">
				<tr>
					<td><a href="javascript:changeBet(${status.index});">${status.count}</td>
					<td>${bet.player.name}</a></td>
					<td>${bet.number}</td>		   
				</tr>
			</c:forEach>
		</table>
	</div>
	<br />
	<div id="bet" />

</center>
</body>
</html>
